<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
		<script type="text/javascript">
			/*
			 * 使用js提交form表单
			 */
			function doSubmit() {
				from1.submit();
				document.getElementById("from1").submit();
			}

			/*
			 * 进行表单验证
			 */
			function checkMe() {
				//定义初始值为true
				var isChecked = true;
				//定义提示信息
				var msg = "";
				//验证是否输入了姓名
				var txtName = document.getElementById("txtName").value;
				if(txtName == null || txtName == "") {
					isChecked = false;
					msg += "请输入姓名!\n"
				}
				//验证是否输入了密码
				var txtPsw = document.getElementById("txtPsw").value;
				if(txtPsw == null || txtPsw == "") {
					isChecked = false;
					msg += "请输入密码!\n"
				}
				//验证性别是否选择
				var mySex = document.getElementsByName("radSex");
				var isSex = false;
				//验证所有的单选组件，验证是否进行了选择
				for(var i = 0; i < mySex.length; i++) {
					if(mySex[i].checked) {
						isSex = true;
						break;
					}
				}
				//设置性别验证结果
				if(!isSex) {
					isChecked = false;
					msg += "请选择性别！\n";
				}

				//学历验证
				//邮箱验证
				var txtMail = document.getElementById("txtMail").value;
				if(txtMail == null || txtMail == "") {
					//验证失败
					isChecked = false;
					//错误提示信息
					msg += "请输入邮箱！\n"
				}
				//正则表达式验证邮箱格式是否正确
				//定义邮箱验证的正则表达式
				var tegMail = /^\w+@\w+.[A-Za-z]{2,3}(.[A-Za-z]{2,3})?$/;
				if(tegMail.test(txtMail) == false) {
					//邮箱格式不正确
					//验证失败
					isChecked = false;
					//错误提示信息
					msg += "邮箱格式不正确！\n"
				}
				//进行表单验证
				if(isChecked) {
					//都输入了，则提交
					return true;
				} else {
					//没有输入的则提示输入，并且不会提交
					alert(msg);
					return false;
				}
			}
		</script>
	</head>

	<body>
		<!--form表单：客户端浏览器用来向服务器端进行信息提交的标签
			写在form表单的标签的值才会被提交给服务器
			action -- 指定的是服务器端的那个程序（类-方法）进行响应；
			method -- 使用哪种方式进行数据从客户端发送到服务器。
			      选项：get -- 将客户端数据信息附加在访问连接url的尾端进行发送信息；
			                 缺点：需要附加在url之后，可能会以明文的形式显示，信息不安全；
			                长度会受到限制（不能大于255个制度） 
			                汉字容易乱码（字节流方式传输）
			       post -- 将客户端数据信息以数据包的形式发送到服务器端
			                 不在上述问题。
		-->
		<div align="center">
			<form id="from1" action="#" method="get">
				<table border="1" cellpadding="0" cellspacing="0" bordercolor="#AAD7DB" style="width: 80%; align-self: center;">
					<tbody>
						<tr>
							<td>姓名</td>
							<td><input type="text" id="txtName" name="txtName" /></td>
						</tr>
						<tr>
							<td>登录密码</td>
							<td><input type="password" id="txtPsw" name="txtPsw" /></td>
						</tr>
						<tr>
							<td>性别</td>
							<!--radio类型的输入框：需要name属性值一样，才具有互斥选择性-->
							<td><input type="radio" id="radSex1" name="radSex" /> 女
								<input type="radio" id="radSex2" name="radSex" />男
								<input type="radio" id="radSex3" name="radSex" />未知</td>
						</tr>

						<tr>
							<td>个人简历</td>
							<td><input type="file" id="fileResume" name="fileResume" /></td>
						</tr>
						<tr>
							<td>兴趣爱好</td>
							<!--checkbox多选框：需要name属性保持一致；服务器是使用数组对一组checkbox控件的值进行接收的-->
							<td><input type="checkbox" id="chHobby1" name="chHobby" />游泳
								<input type="checkbox" id="chHobby2" name="chHobby" />爬山
								<input type="checkbox" id="chHobby3" checked name="chHobby" />dota
								<input type="checkbox" id="chHobby4" name="chHobby" />coding
								<input type="checkbox" id="chHobby5" name="chHobby" />testing</td>
						</tr>
						<tr>
							<td>隐藏控件</td>
							<td><input style="" type="hidden" name="txthidden" id="txthidden" value="520" /></td>
						</tr>
						<tr>
							<td>学历</td>
							<td>
								<select id="selectXL" name="selectXL" style="width: 120px;">
									<option value=""></option>
									<option value="DZ">大专</option>
									<option value="BK" selected>本科</option>
									<option value="SS">硕士</option>
									<option value="BS">博士</option>
								</select>
							</td>
						</tr>
						<tr>
							<td>自我介绍</td>
							<td><textarea id="txtIntroduce" name="txtIntroduce" style="width: 200px;height: 60px;"></textarea></td>
						</tr>
						<tr>
							<td>邮箱</td>
							<td><input style="" name="txtMail" id="txtMail" /></td>
						</tr>
						<tr>
							<td><input type="button" value="提交" id="btnSubmit" onclick="return doSubmit();" />
								<input type="submit" value="提交2" id="btnSubmit" onclick="return checkMe();" /></td>
							<td><input type="reset" value="重置" id="btnSubmit" /></td>
						</tr>
					</tbody>
				</table>

			</form>
		</div>
	</body>

</html>